<template>
    <div id="main">

    </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, } from "vue"
import { useStore } from "vuex";
import * as echarts from 'echarts';
const store=useStore()
let list= store.state.obj
var option;
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Profit', 'Expenses', 'Income']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            data: [...list.timeStr]
        }
    ],
    series: [
        {
            name: 'Profit',
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                focus: 'series'
            },
            data: [...list.income]
        },
        {
            name: 'Income',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [...list.expense]
        },
        {
            name: 'Expenses',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true,
                position: 'left'
            },
            emphasis: {
                focus: 'series'
            },
            data: [...list.balance]
        }
    ]
};
onMounted(() => {
    setTimeout(() => {
        var chartDom1 =  document.getElementById('main');
        var myChart1 = echarts.init(chartDom1);
        option && myChart1.setOption(option);
    }, 1000)
})
</script>
<style lang="scss" scoped>
#main {
    width: 100%;
    height: 100%;
}
</style>